<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>案例_省市区联动效果</title>
</head>

<body>
  <div class="container">
    <h4 class="stu-title">案例_省市区联动效果</h4>
    <div class="area-box">
      <span class="title">地区选择</span>
      <select name="province" class="province">
        <option value="">省份</option>
      </select>
      <select name="city" class="city">
        <option value="">城市</option>
      </select>
      <select name="area" class="area">
        <option value="">地区</option>
      </select>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
  <script>
    /**
   * 目标: 完成省市区下拉列表切换
   *  1.1 设置省份下拉菜单数据  
   *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
   *  1.3 切换城市，设置地区下拉菜单数据
   */
    async function render() {
      const { data } = await axios.get('http://hmajax.itheima.net/api/province')
      // console.log(data.list);
      document.querySelector('.province').innerHTML = '<option value="">省份</option>' +
        data.list.map(res => `<option value="${res}">${res}</option>`).join('')
    }
    render()

    // 需要给省份下拉框注册change事件
    document.querySelector('.province').addEventListener('change', async function () {

      const pname = this.value
      const str = await axios.get('http://hmajax.itheima.net/api/city', { params: { pname } })
      // console.log(str);
      document.querySelector('.city').innerHTML = '<option value="">城市</option>' + str.data.list.map(res => `<option value="${res}">${res}</option>`).join('')

      document.querySelector('.area').innerHTML = '<option value="">地区</option>'
    })

    // 需要给市级下拉框注册change事件

    document.querySelector('.city').addEventListener('change', async function () {
      const pname = document.querySelector('.province').value
      const cname = this.value
      const str = await axios.get('http://hmajax.itheima.net/api/area', { params: { pname, cname } })
      // console.log(str);
      document.querySelector('.area').innerHTML = '<option value="">地区</option>' +
        str.data.list.map(res => `<option value="${res}">${res}</option>`).join('')

    })
    /*
      省份接口：http://hmajax.itheima.net/api/province
      城市接口：http://hmajax.itheima.net/api/city
            参数：pname 省份名
      区域接口：http://hmajax.itheima.net/api/area
            参数： 
              pname: 省份名
              cname: 城市名
    */

  </script>
</body>

</html>